<template>
	<div class="bg-color">
		<loading v-show='!show'></loading>
		<div id="head">
			<div>
				<button :class="actived=='attack'?'btn-active':'btn-unactive'" class="button small-btn button--aylen"
				@click="toactive('attack')">{{$t('home.breadbtn1')}}</button>
				<span class="broder"></span>
				<button :class="actived=='terminal'?'btn-active':'btn-unactive'" class="button small-btn button--aylen"  
				@click="toactive('terminal')">{{$t('home.breadbtn2')}}</button>
			</div>	
			<button class="small-btn button button--aylen"  @click="goDetail">{{$t('home.detailBtn')}}</button>
		</div>	
		<transition name='fade'>
			<div v-if = 'show'>			
				<!--渗透攻击  -->
				<table v-if="actived=='attack'" id="penetratin">
					<thead class="thead-top-line">
						<tr>
							<th style="width: 50px;">{{$t('home.attackTableTh1')}}</th>
							<th style="width: 105px;">{{$t('home.attackTableTh2')}}</th>
							<th style="width: 42px;">{{$t('home.attackTableTh3')}}</th>
							<th style="width: 102px;">{{$t('home.attackTableTh4')}}</th>
							<th style="width: 47px;">{{$t('home.attackTableTh5')}}</th>
							<th style="width: 70px;">{{$t('home.attackTableTh6')}}</th>
							<th style="width: 100px;">{{$t('home.attackTableTh7')}}</th>
							<th style="width: 65px;">{{$t('home.attackTableTh8')}}</th>
							<th style="width: 61px;">{{$t('home.attackTableTh9')}}</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for='(item, index) in attackDate' @dblclick="showModal(item.mac,item.desc)" :key="index">
							<template v-if="item.mac">
								<td>{{index+1}}</td>
								<td><p>{{item.mac}}</p></td>
								<td data-toggle="tooltip" data-placement="bottom" :title='item.desc'><p>{{item.desc ? item.desc : '-'}}</p></td>
								<td data-toggle="tooltip" data-placement="bottom" :title='item.type'><p>{{item.type}}</p></td>
								<td data-toggle="tooltip" data-placement="bottom" :title='item.count'><p>{{item.count}}</p></td>
								<td><p>{{item.phy_port}}</p></td>
								<td data-toggle="tooltip" data-placement="bottom" :title='item.end_time'><p >{{item.end_time ? item.end_time : '-'}}</p></td>
								<td><p>{{item.block ? $t('home.block') : $t('home.unblock')}}</p></td>
								<td>
									<button class="button button--aylen" v-bind:class="[item.block ? 'unblock' : 'block']" @click="blockModalShow(item.mac,!item.block)">
									{{item.block ? $t('home.unblockBtn') : $t('home.blockBtn')}}
									</button>
								</td>
							</template>
						</tr>
					</tbody>
				</table>
				<!-- 前五活跃终端 -->
				<div v-show="actived=='terminal'" id="top-five">
					<div>
						<div >
							<span class="block" :class="themeColor === 'red' ? 'red' : 'blue'"></span><span style="padding: 0 5px;">{{$t('home.legend1')}}</span>
							<span class="block orange"></span><span style="padding: 0 5px;">{{$t('home.legend2')}}</span>
						</div>
						<rankpic :activeTable="activeTable" class='rankpic'></rankpic>	
					</div>		
					<table id = "top-five-table">
						<thead>
							<tr>
								<th style="width: 105px;">{{$t('home.topTableTh1')}}</th>
								<th style="width:40px;">{{$t('home.topTableTh2')}}</th>
								<th style="width:80px;">{{$t('home.topTableTh3')}}</th>
								<th style="width:80px;">{{$t('home.topTableTh4')}}</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for='(item,index) in items' :key="index">
								<td style="color: #3eb551;width: 105px; ">
									{{item.mac}}
								</td>
								<td style="color:#c0c0c0;width:40px;" data-toggle="tooltip" data-placement="bottom" :title='item.desc'>
									<p>{{item.desc ? item.desc : '-'}}</p>
								</td>
								<td style="width:80px;">
									<p>{{convertFlow(item.tx)}}</p>
								</td>
								<td style="width:80px;">
									<p>{{convertFlow(item.rx)}}</p>
								</td>
							</tr>
						</tbody>
					</table>
				</div>				
			</div>	
		</transition>	
		<Modals :id ="'blockModal'" :title="oper=='block'?'封堵主机':'解封主机'"  :status = "result" 
		 :errorMsg="errorMsg"  @sentErrorMsg = "getErrorMsg"  @modalEvent ="setBlock">
		      <div slot="add_edit">
				  <p style="font-size: 16px;">确定{{oper=='block'?'封堵':'解封'}}该主机？</p>
			  </div>
		</Modals>
		<detailModal :detail = "detail" ></detailModal>
	</div>
</template>
<script>
import rankpic from './rank/rankpic.vue'
import indexService from 'services/indexService'
import loading from 'components/common/loading'
import Modals from 'components/common/Modals'
import detailModal from 'components/common/detailModal'
import attackType from 'libs/attackType'
export default {
	props:{
		attack_info:{
			type:Object,
			required:true
		},
		show:{
			type:Boolean,
			required:true
		}
	},
	data() {
		return {
			actived: 'attack',
			attack: true,
			oper:'',
			result:'',
			errorMsg:'',
			mac:'',
			detail:{
				mac:'',
				desc:''
			},
		}
	},
	computed:{
		activeTable:function(val) {
			return this.attack_info.active_mac
		},
		attackDate:function() {
			let attackDate=this.attack_info.attack.map((item)=>{
				switch (item.type-0) {
					case 1:
						item.type='哨兵节点存活探测';
						break;
					case 2:
						item.type='哨兵节点服务探测';
						break;
					case 5:
						item.type='全息节点存活探测';
						break;
					case 6:
						item.type='全息节点服务探测';
						break;
					case 7:
						item.type='端口虚开'
						break;
					default:
						break;
				}
				switch (item.phy_port-0) {
					case -1:
						item.phy_port = this.$t('home.road-1');
						break;
					case 0:
						item.phy_port= this.$t('home.road0');
						break;
					default:
						item.phy_port = this.$t('home.road')+item.phy_port
						break;
				}
				return item
			})
			return attackDate
		},
		items: function() {
			let item = { mac: "-", desc: "-", tx: "-", rx: "-" }
			let items = [item, item, item, item, item]
			for(let i = 0; i < this.attack_info.active_mac.length; i++) {
				items[i] = this.attack_info.active_mac[i]
			}
			return items
		}
	},
	methods: {
		toactive: function(label) {
			this.actived = label
		}	,
		showModal(mac,desc) {
			this.detail={
				mac:mac,
				desc:desc
			}
			$('#detailModel').modal('show')
		},
		blockModalShow(mac, block) {
			if (block) {
				this.oper='block'
			} else {
				this.oper='unblock'
			}
			this.mac=mac
			this.result=''
			$("#blockModal").modal('show')
		},
		goDetail() {
			if (this.actived  == 'attack') {
				this.$router.push('/logManage/log')	
			} else {
				this.$router.push('/current/userMonitor')
			}
		},
		getErrorMsg(msg) {
			this.errorMsg = msg
		},
		setBlock() {
			this.result='ing'
			indexService.setBlock({ipmac: this.mac, oper: this.oper})
				.then((res) => {
					
					if (res.errcode === 0) {
						this.result='ok'
					} else {
						this.result='error'
						this.errorMsg=res.errorMessage
					}
				})
		},
		convertFlow(bps) {
			let flow = ''
			if (bps < 1024) {
				flow = Math.ceil(bps) + ' Bps'
			}
			if (bps >= 1024 && bps < 1024 * 1024) {
				flow = bps / 1024
				flow = flow.toFixed(2) + ' KBps'
			}
			if (bps >= 1024 * 1024 && bps < 1024 * 1024 * 1024) {
				flow = bps / 1024 / 1024
				flow = flow.toFixed(2) + ' MBps'
			}
			if (bps >= 1024 * 1024 * 1024) {
				flow = bps / 1024 / 1024 / 1024
				flow = flow.toFixed(2) + ' GBps'
			}
			return flow
		}
	},
	components: {
		rankpic,
		loading,
		Modals,
		detailModal
	}
}
</script>
<style scoped lang='less'>
	.bg-color {
		background: #ffffff;
		height: 340px;
		margin-top: 20px;
		padding: 10px 28px;
	}
	#head {
	 display: flex;
	 justify-content: space-between;
	 margin-bottom: 10px;
	 	.broder {
			border-left: 1px solid #c4c4c4;
			height: 16px;
			margin: 0 5px;
			display: inline-block;
			vertical-align: middle;
		}
	}

	/*渗透攻击*/		
	#penetratin tbody tr{
		cursor:pointer;
		td{
			padding-left: 5px;
			padding-right: 5px;
		}
		td:nth-child(2)>p{
			width:105px;
		}
		td:nth-child(3)>p{
			width:40px;
		}
		td:nth-child(4)>p{
			width:102px;
		}
	  td:nth-child(5)>p{
			width:47px;
		}
		td:nth-child(7)>p{
			width:80px;
			overflow: hidden;
			text-overflow: ellipsis;

		}
		td .button {
			width: 50px;
			height: 18px;
			color: #FFFFFF;
		}
		.block {
			background: #fac064;
		}
		.unblock {
			background: #68bf72;
		}
	}




	/*前十排名*/
	#top-five{
		display: flex;
		.block{
			display: inline-block;
			width: 10px;
			height: 10px; 
			
		}
		.red{
			background:#eb5940; 
		}
		.blue{
			background:#69b6ff; 
		}
		.orange{
			background:#feae00;
		}
		#top-five-table{
			width: 340px;
			margin-left: 10px;
			th,td{
				height: 45px;
			}
			td>p{
				width:78px;
			}
			td:nth-child(2)>p{
				width:40px;
				padding-left:5px;
				padding-right: 5px; 
			}
			td:nth-child(3)>p,td:nth-child(4)>p{
				width:78px;
			}
		}
	}
</style>